<template>
    <div class="c">
      <div
        v-for="(course, index) in courses" 
        :key="index"
        class="c_card"
        :style="{
          backgroundColor: `${courseMap[course.course_type]['color']}`,
        }"
        @click="prepareCourse(index)"
      >
      <div class="c_card_wh">
        <div class="c_card_wh_header">
          <span class="c_card_wh_header_tag"> {{ course.evaluation }}</span>
          <!-- <a-tag color="#2db7f5" class="c_card_wh_header_tag">{{ course.evaluation }}</a-tag> -->
        </div>
        <div class="c_card_wh_body">
          <span class="c_card_wh_body_number">{{
            course.lesson_name
          }}</span>
          <span class="c_card_wh_body_name">{{ courseMap[course.course_type]["name"] }}</span>
        </div>
        <div class="c_card_wh_footer">
          <span class="c_card_wh_footer_tag">共{{ course.total_study_hours }}课时</span>
        </div>
        <div class="c_card_wh_icon">
          <a-icon
          :type="courseMap[course.course_type]['icon']"
        />
        </div> 
      </div>
      </div>
    </div>
</template>

<script>
import courseLayout from "@/utils/userConst";
import { mapState } from "vuex";

export default {
  data() {
    return {
      courseMap: courseLayout.courseMap,
    };
  },
  methods: {
    onSearch() {},
    prepareCourse(courseIndex) {
      const lessonId = this.courses[courseIndex]._id;
      let recentCourses = localStorage.getItem("recent-courses") || "[]";
      recentCourses = JSON.parse(recentCourses);
      let curCourse = recentCourses.findIndex((item) => item._id === lessonId);
      if (curCourse >= 0) {
        recentCourses.splice(curCourse, 1);
      }
      recentCourses.unshift(this.courses[courseIndex]);
      localStorage.setItem(
        "recent-courses",
        JSON.stringify(Array.from(new Set(recentCourses)).slice(0, 4))
      );
      this.$router.push({
        name: "teacher_precourse",
        query: {
          lessonId,
          lessonName: this.courses[courseIndex].lesson_name,
          prepareNumber: this.courses[courseIndex].prepareNumber,
          courseHours: this.courses[courseIndex].total_study_hours,
        },
      });
    },
  },
  computed: {
    containerHeight() {
      const height = window.innerHeight;
      return `${height - 220}px`;
    },
    ...mapState({
      uid: (state) => state.public.uid,
      courses: (state) => state.teacher.courses,
    }),
  },
  filters: {
    progressFilter({ prepareNumber, total_study_hours }) {
      return `已备${prepareNumber}课时/共${total_study_hours}课时`;
    },
  },
  mounted() {
    this.$store.dispatch("teacher/getTeacherCourses", this.uid);
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
}
.container {
  height: 100%;
  overflow-y: auto;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
